//- Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
//- 
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//- 
//-     http://www.apache.org/licenses/LICENSE-2.0
//- 
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.


.comment-container
  link(rel="stylesheet", href="/css/comment.css")

  if canComment
    form.comment-form
      .rate-input
        span.rate-1-star ★
        span.rate-2-star ★
        span.rate-3-star ★
        span.rate-4-star ★
        span.rate-5-star ★
      textarea.comment-textarea(placeholder="Write your comment...")
      button.comment-submit-button Submit Review

  if comments
    .comments-section
      h2 Customer Reviews &nbsp;
        span.product-average-rating #{averageRating || 'No ratings yet'}
      .comments-list
        each comment in comments
          .comment-item
            div
              span.comment-username=comment.username
              span.comment-rating=comment.rating
            .comment-text= comment.text

script.
  let rating = 0;
  const commentForm = document.querySelector('.comment-form')

  if (commentForm) {
    const rateInput = commentForm.querySelector('.rate-input')
    const textarea = commentForm.querySelector('.comment-textarea')


    Array.from(rateInput.children).forEach((star, index) => {
      star.addEventListener('click', () => {
        rating = index + 1
        Array.from(rateInput.children).forEach((s, i) => {
          if (i <= index) {
            s.classList.add('active')
          } else {
            s.classList.remove('active')
          }
        })
      })
    })


    commentForm.addEventListener('submit', async (e) => {
      e.preventDefault()

      if (!rating) {
        alert('Please select a rating')
        return
      }

      const productId = window.location.pathname.split('/').pop();

      const res = await fetch('/api/comment', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          productId,
          rating,
          text: textarea.value
        })
      })

      const data = await res.json()
      if (data.success) {
        window.location.reload()
      } else {
        alert(data.message)
      }
    })
  }